<template>
  <div class="collapseCoursesmore">
    <el-collapse accordion>
      <el-collapse-item ref="collapse">
        <template slot="title">
          <div class="iconBox">
            <img :src="require('@/assets/images/headLogo.png')" />
          </div>
          <div
            class="title"
            v-for="(item, index) in titleData"
            :key="index"
            @click.stop="handelChangeType(item, index)"
             :class="{ select: defaultSelect === index }"
          >
            {{ item.name }}
          </div>
          <div class="downIconBox">
            <img :src="require('@/assets/images/down.png')" class="icon" />
          </div>
        </template>
        <div
          class="courses"
          :class="{
            zCourses: filterCourses.length % 4 == 0,
            courses2: filterCourses.length % 4 == 2,
            courses3: filterCourses.length % 4 == 3,
          }"
        >
          <div v-if="!filterCourses.length">暂无该课程数据</div>
          <div
            class="course hover_boxShadow_defaut_shadow"
            v-for="(citem, cindex) in filterCourses"
            :key="cindex"
            @click="handelJumpRotue(citem)"
          >
            <div class="iconPathBox">
              <img v-lazy=" citem.iconPath" />
            </div>
            <div class="name" :title="citem.name || '【开课名称】'">
              {{ citem.name || "【开课名称】" | filterName }}
            </div>
            <!-- <div class="info">{{ citem.name | filterName }}课程简介</div> -->
            <div class="desc" :title="citem.currDesc || '无'">
              课程类型：{{ citem.courseType || "未知" }}
            </div>
            <!-- <div class="desc">教师：{{ citem.tutorStaffUserID || "无" }}</div>
            <div class="desc">
              设计：{{ citem.mainDesignerUserID || "【设计师】" }}
            </div>
            <div class="desc">
              选修时间：{{ citem.openChooseTime || "无" | filterTime }} ~
              {{ citem.closeChooseTime || "无" | filterTime }}
            </div>
            <div class="desc">已选人数：{{ citem.selectCount || 0 }}</div> -->
            <div class="design">
              设计：<span>{{ citem.designerNameList || filterUserName(citem.mainDesignerUserID) || "【设计师】" }}</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { location } from "@/util/tool";
import { mapState } from "vuex";

export default {
  data() {
    return {
      defaultSelect: 0,
      titleData: [
        {
          name: "课程库"
        },
        {
          name: "更多"
        }
      ],
      location: location(window),
    };
  },
  computed: {
    ...mapState({
      courses: (state) => state.courses.courses,
      userList:(state) => state.user.userList,
    }),
    filterCourses() {
      let data = JSON.parse(JSON.stringify(this.courses))?.reverse()
      if (data.length > 8)data.length = 8
      return data
    },
    filterUserName: () => {
      return function (val) {
        const findUser = this.userList.find(item => item.userID === val)
        return !findUser ? val : findUser.realName || findUser.nickName || findUser.email || findUser.regName;
      }
    }
  },
  props: {
    coursesData: Array,
  },
  filters: {
    filterName(value) {
      return value.substring(0,value.lastIndexOf('_') == -1 ? value.length:value.lastIndexOf('_'));
    },
    filterTime(val) {
      const time = new Date(val);
      if (time == "Invalid Date") return val;
      return `${time.getFullYear()}-${
        time.getMonth() + 1
      }-${time.getDate()} ${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`;
    },
  },
  created() {
    this.$nextTick(() => {
      this.$refs.collapse.handleHeaderClick();
    });
    // if (!this.userList.length) this.$store.dispatch("user/getUserList")
  },
  methods: {
    handelChangeType(item, index) {
      if (index === 1) this.$router.push({ name: "courseStore" })
    },
    handelJumpRotue(item) {
      this.$router.push({
        name: "store_browseDetail",
        query: {
          courseId: item.courseID,
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="stylus">
.collapseCoursesmore {
  .el-collapse {
    border: none;
    background-color: #ffffff;
    box-shadow: 0px 10px 6px 0px rgba(19, 18, 18, 0.16);
    border-radius: 20px;
    border: solid 1px rgba(217, 217, 217, 0.5);
    overflow: hidden;

    .el-collapse-item {
      .el-collapse-item__header, .el-collapse-item__wrap {
        padding: 0 60px;
        border: none;
      }

      .el-collapse-item__header {
        height: 80px;

        .iconBox {
          margin-right: 45px;

          img {
            max-width: 144px;
            max-height: 47px;
          }
        }

        .title {
          margin-right: 50px;
          position: relative;
          font-family: Segoe UI;
          font-size: 16px;
          font-weight: bold;
          color: #707070;
        }

        .select {
          font-weight: bold;
        }

        .select::after {
          position: absolute;
          content: '';
          left: 50%;
          right: 50%;
          bottom: 10px;
          transform: translate(-50%, 0);
          width: 15px;
          height: 4px;
          background: #fea91b;
          border-radius: 5px;
        }

        .el-collapse-item__arrow {
          display: none;
        }

        .downIconBox {
          margin: 0 0 0 auto;
          transition: transform 0.3s;

          img {
            user-select: none;
            width: 100%;
            height: 100%;
          }
        }
      }

      .el-collapse-item__wrap {
        padding-top: 21px;

        .courses {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-flow: row wrap;

          .course {
            cursor: pointer;
            padding: 4px 10px 0;
            margin-bottom: 15px;
            width: 250px;
            height: 240px;
            background-color: #ffffff;
            // box-shadow: -6px -1px 6px 0px rgba(0, 0, 0, 0.16);
            border-radius: 8px;
            border: solid 1px #ffffff;

            .iconPathBox {
              img {
                object-fit: cover;
                width: 220px;
                height: 135px;
                border-radius: 8px;
              }
            }

            .name {
              margin-top: 8px;
              font-family: Segoe UI;
              font-size: 19px;
              font-weight: bold;
              color: #000;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .desc {
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .design span {
              // font-weight: bold;
              font-family: Segoe UI;
              font-size: 14px;
            }

            .info {
              font-family: Segoe UI;
              font-size: 16px;
              color: #707070;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .count {
              font-family: Segoe UI;
              font-size: 12px;
              color: #707070;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .more {
              font-family: Segoe UI;
              font-size: 12px;
              color: #707070;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }
        }
      }

      .zCourses::after {
        content: none;
      }

      .courses2::after {
        position: relative;
        content: '';
        width: calc((100% - (240px * 4)) / 3 + (240px * 2));
        height: 270px;
      }

      .courses3::after {
        position: relative;
        content: '';
        width: calc(100% - (100% - 240px));
        height: 270px;
      }
    }

    .is-active {
      .el-collapse-item__header {
        .downIconBox {
          transform: rotate(180deg);
        }
      }
    }
  }
}
</style>